/*
 * @Autor: dingxiaolin
 * @Date: 2020-06-16 22:14:56
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2020-06-17 23:14:38
 */

import React, { Component } from "react";
import "antd/dist/antd.css";
import { Input, Button, List } from "antd";
import store from "./store";
import { ADD_LIST, DELETE_ITEM } from "./store/actionType";
import { changeInputAction, getListAction } from "./store/actionCreators";
import axios from "axios";
import { SearchOutlined } from '@ant-design/icons';
export default class TodoList extends Component {
  constructor(props) {
    super(props);
    console.log("props", store.getState());
    this.state = store.getState();
    this.changeValue = this.changeValue.bind(this);
    store.subscribe(this.storeChange);
  }
  componentDidMount() {
    
  }
  storeChange = () => {
    this.setState(store.getState());
  };
  changeValue(e) {
    console.log(e.target.value);
    const action = changeInputAction(e.target.value);
    store.dispatch(action);
  }
  search=()=>{
    axios
    .get(`http://fc.dingxiaolin.com/amap/poi?keywords=${this.state.value}&city=镇江市`)
    .then((res) => {
      const data = res.data.data.pois;
      console.log(data);
      const action = getListAction(data);
      store.dispatch(action);
    });
  }
  addList = () => {
    const action = {
      type: ADD_LIST,
      value: this.state.value,
    };
    store.dispatch(action);
  };
  deleteItem = (index) => {
    console.log("ss", index);
    const action = {
      type: DELETE_ITEM,
      index,
    };
    store.dispatch(action);
  };
  render() {
    return (
      <div style={{ width: "1000px" }}>
        <div>
          <Input onChange={this.changeValue} value={this.state.value} />
        </div>
        <Button
          type="primary"
          style={{ marginTop: "10px" }}
          onClick={this.addList}
          danger
        >
          增加
        </Button>
        <Button
          type="primary"
          style={{ marginTop: "10px" }}
          icon={<SearchOutlined />}
          onClick={this.search}
        >
          查询
        </Button>
        <List
          bordered
          dataSource={this.state.list}
          renderItem={(item, index) => (
            // <List.Item onClick={this.deleteItem.bind(this,index)}>{item}</List.Item>
            <List.Item
              onClick={() => {
                this.deleteItem(index);
              }}
            >
              名称：{item.name},地址：{item.address}<br/>
              照片：
              { item.photos&&item.photos.map((item,index)=>{
                return   <img key={index} src={item.url} alt="" style={{width:'100px',marginLeft:'10px'}}/>
              })}
            </List.Item>
          )}
        ></List>
      </div>
    );
  }
}
